<template>
  <view class="container">
    <view class="user">
      <view class="info">
        <view class="name">
          <p class="nick-name color-333 font-18 font-weight-600">
            {{ name }}
            <!-- <span class="color-fff font-10">管理员</span> -->
          </p>
          <p class="company color-555 font-11">
            {{ corpName }}
          </p>
        </view>
        <image
          class="avatar"
          :src="avator"
          mode="aspectFill"
        />
      </view>
      <view class="ticket">
        <view class="num color-fff">
          {{ couponNumber }}
        </view>
        <view class="font-11 color-fff intro">
          —— 快乐券剩余{{ couponNumber }}张 ——
        </view>
      </view>
    </view>
    <view class="nav">
      <view class="title">
        <view class="my-order">
          我的订单
        </view>
        <view
          class="all-order"
          @tap="$jumpUrl(`/subPages/personalCenter/order/list`)"
        >
          全部订单
          <img
            src="@/static/public/arrow-right.png"
            alt=""
          >
        </view>
      </view>
      <view class="nav-list">
        <view
          v-for="(item, index) in navList"
          :key="index"
          class="item"
          @tap="$jumpUrl(`/subPages/personalCenter/order/list?status=${item.status}`)"
        >
          <view
            v-if="item.marker && item.marker > 0"
            class="marker"
          >
            {{
              item.marker
            }}
          </view>
          <image
            :src="item.icon"
            mode="aspectFill"
          />
          <view class="name">
            {{ item.name }}
          </view>
        </view>
      </view>
    </view>
    <view class="line" />
    <view class="nav">
      <view class="title">
        <view class="my-order">
          我的工具
        </view>
      </view>
      <view class="nav-list">
        <view
          v-for="(item, index) in toolList"
          :key="index"
          class="item"
					@tap="onTool(item)"
        >
          <image
            :src="item.icon"
            mode="aspectFill"
          />
          <view class="name">
            {{ item.name }}
          </view>
        </view>
      </view>
    </view>
    <view 
      v-if="admin"
      class="nav" 
      style="padding-top:0"
    >
      <view class="title">
        <view class="my-order">
          企业工具
        </view>
      </view>
      <view class="nav-list">
        <view
          v-for="(item, index) in toolList1"
          :key="index"
          class="item"
          @tap="onTool(item)"
        >
          <image
            :src="item.icon"
            mode="aspectFill"
          />
          <view class="name">
            {{ item.name }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      navList: [
        {
          name: '待付款',
          icon: require('@/static/home/paid.png'),
          status: 'NEW'
        },
        {
          name: '未出行',
          icon: require('@/static/home/travel.png'),
          status: 'WAIT_USE'
        },
        {
          name: '退款中',
          icon: require('@/static/home/comment.png'),
          status: 'REFUNDING'
        },
        {
          name: '退款成功',
          icon: require('@/static/home/service.png'),
          status: 'REFUNDED'
        }
      ],
      toolList: [
        {
          name: '领用快乐券',
          path: '/subPages/personalCenter/getCoupon/index',
          icon: require('@/static/home/infor.png'),
          nav: 'COUPON',
					isShow: true
        },
        {
          name: '用户协议',
          // path: 'userAgreement',
          icon: require('@/static/home/agreement.png'),
          nav: 'userAgreement',
					isShow: true
        },
        {
          name: '关于我们',
          path: '/subPages/about/index',
          icon: require('@/static/home/about.png'),
          nav: 'EVALUTE',
					isShow: true
        },
				{
				  name: '联系客服',
				  path: 'oncall',
				  icon: require('@/static/home/contact.png'),
				  nav: 'contact',
					isShow: true
				}
      ],
      toolList1: [
        {
					name: '企业充值',
					path: '/subPages/personalCenter/recharge/index',
					icon: require('@/static/home/recharge.png'),
					nav: 'recharge'
				},
        {
					name: '买券',
					path: '/subPages/buyCoupons/index',
					icon: require('@/static/home/couponsPay.png'),
					nav: 'recharge'
				},
        {
					name: '发福利',
					path: '/subPages/sendCoupons/index',
					icon: require('@/static/home/IssueBenefits.png'),
					nav: 'recharge'
				},
        {
				  name: 'webview',
				  path: '/subPages/ad/ad_index',
				  icon: require('@/static/home/about.png'),
				  nav: 'recharge'
				}
      ],
			couponNumber: 0,
			name: '',
			avator: '',
			corpName: '',
      admin: false
    };
  },
	onShow() {
		this.getUserInfo();
	},
	methods: {
		getUserInfo() {
			this.$ajax({
			  method: 'get',
			  url: '/outing/mobile/user/userInfo/queryInfo',
			}).then(res => {
				if(res && res.data) {
					const { name, avator, couponNumber, corpName, admin } = res.data;
					this.couponNumber = couponNumber || 0;
					this.name = name;
					this.avator = avator;
					this.corpName = corpName;
					this.admin = admin
				}
			});
		},
		onTool(item) {
			if(item.nav === 'contact') {
				dd.showCallMenu({
				  phoneNumber: '13018998305', // 期望拨打的电话号码
				  showDingCall: false, // 是否显示钉钉电话
				});
			} else if(item.nav === 'userAgreement') {
				this.$jumpUrl('/subPages/userAgreement/index')
			} else if(item.path) {
				this.$jumpUrl(`${item.path}`);
			}
		}
	}
};
</script>

<style lang="less" scoped>
.container {
  min-height: 100vh;
  background: #ffffff;
  .user {
    background: #fff;
    width: 100%;
    height: 391rpx;
    padding: 0 30rpx;
    position: relative;
    background: url('https://lishiots.oss-cn-hangzhou.aliyuncs.com/webstatic/outing-fun/userBg.png')
      no-repeat;
    background-size: 100% 100%;
    padding-top: 40rpx;
    .info {
      width: 100%;
      height: 120rpx;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      .name {
        // display: flex;
        flex: 1;
        .nick-name {
          margin-bottom: 8rpx;
          span {
            display: inline-block;
            width: 108rpx;
            height: 34rpx;
            line-height: 34rpx;
            text-align: center;
            background: linear-gradient(323deg, #ffc77b 0%, #fe7d15 100%);
            border-radius: 17rpx;
            margin-left: 23rpx;
          }
        }
      }
      .avatar {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
      }
    }
    .ticket {
      text-align: center;
      width: 690rpx;
      height: 160rpx;
      position: absolute;
      bottom: 0;
      left: 30rpx;
      background: url('https://lishiots.oss-cn-hangzhou.aliyuncs.com/webstatic/outing-fun/happyTicket.png')
        no-repeat;
      background-size: 100% 100%;
      .num {
        margin-top: 20rpx;
        font-size: 76rpx;
        line-height: 77rpx;
        font-weight: bold;
        font-family: JCHEadA;
      }
      .num::after {
        content: ' 张';
        font-size: 20rpx;
        color: #fff;
      }
    }
  }
  .nav {
    width: 100%;
    height: 258rpx;
    box-sizing: border-box;
    background: #ffffff;
    padding-top: 30rpx;
    .title {
      display: flex;
      padding: 0 30rpx;
      justify-content: space-between;
      .my-order {
        font-size: 28rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        color: #26252c;
        line-height: 45rpx;
        margin-bottom: 30rpx;
      }
      .all-order {
        font-size: 24rpx;
        font-weight: 400;
        color: #999999;
        line-height: 33rpx;
        img {
          width: 15rpx;
          height: 15rpx;
          margin-left: 10rpx;
        }
      }
    }
    .nav-list {
      display: flex;
      align-items: center;
			flex-wrap: wrap;
      .item {
        // flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
				width: 25%;
				margin-bottom: 30rpx;
        .marker {
          position: absolute;
          top: -10rpx;
          right: 22rpx;
          width: 35rpx;
          height: 35rpx;
          text-align: center;
          line-height: 35rpx;
          color: #fff;
          border-radius: 50%;
          background-color: red;
        }
        image {
          width: 60rpx;
          height: 60rpx;
          margin-bottom: 10rpx;
        }
        .name {
          font-size: 24rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
          line-height: 33rpx;
        }
      }
    }
  }
  .line {
    background: #f7f9fb;
    width: 100%;
    height: 20rpx;
  }
}
</style>
